import React from 'react'


//父组件
export default class Parent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            msg:'你好是父组件传递到子组件的数据'
        }
    }

    render(){
        return <div>
            <h1>这是父组件</h1>
            <hr/>
            <input type="button" value="点我修正msg属性的值" onClick={this.changeMsg}/>
            <Son pmsg={this.state.msg}></Son>
        </div>
    }

    changeMsg = ()=>{
        this.setState({
            msg:'嘿嘿嘿额'
        })
    }
}


//子组件
class Son extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            msg:'你好'
        }
    }

    render(){
        return <div>
            <h3>这是子组件--{this.props.pmsg}</h3>
        </div>
    }



    /**
     * 组件将要接收外界传递过来的新的属性值
     * 当子组件第一次渲染到页面上的时候，不会触发该函数
     * 当重新修改了子组件的props属性后，该函数才会被触发
     * 在该函数被触发的时候，我们是有this.props获取的属性值并不是最新的，而是上一次的旧值
     * 如果想获取最新的属性值，要通过该函数的参数列表获取
     * 
    */
    componentWillReceiveProps(nextProps){
        // console.log('被触发了')
        console.log(`旧值:${this.props.pmsg},新值: ${nextProps.pmsg}`);
        
    }
}